
import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import Button from 'react-native-button';


import request from '../common/request';
import config from '../common/config';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  AlertIOS,
  Dimensions
} from 'react-native';

var width = Dimensions.get('window').width

var Login = React.createClass({
  getInitialState(){
    return{
      verifyCode: '',
      phoneNumber: '',
      codeSent: false,
      countingDone: false,
      countingNumber: 60
    }
  },

  _showVerifyCode(){
    this.setState({
      codeSent: true,
      countingDone: false
    })
  },

  _countingDone(){
    this.setState({
      countingDone: true
    })
  },

  _countingNumber(){
    var that = this
    var countingNumber = that.state.countingNumber

    var sh = setInterval(function(){
      if(countingNumber == 0){
        that.setState({
          countingDone: true,
          countingNumber: 60
        })
        clearInterval(sh)
      }else{
        countingNumber -= 1
        that.setState({
          countingNumber: countingNumber
        })
      }
    },1000)

    if(countingNumber == 0){
     
    }
  },

  _sendVerifyCode(){
    var that= this
    var phoneNumber = this.state.phoneNumber

    if (!phoneNumber) {
      return AlertIOS.alert('手机号不能为空')
    }

    var body = {
      phoneNumber: phoneNumber
    }

    var signupURL = config.api.base + config.api.signup

    request.post(signupURL, body)
      .then((data)=>{
        if(data && data.success){
          that._showVerifyCode()
        }
        else{
          AlertIOS.alert('获取验证码失败，请检查手机号是否正确')
        }
      })
      .catch((err)=>{
        console.log(err)
        AlertIOS.alert('获取验证码失败，请检查网络是否良好')
      })

    this._countingNumber();
  },

  _submit(){
    var that= this
    var phoneNumber = this.state.phoneNumber
    var verifyCode = this.state.verifyCode

    if (!phoneNumber || !verifyCode) {
      return AlertIOS.alert('手机号或验证码不能为空')
    }

    var body = {
      phoneNumber: phoneNumber,
      verifyCode: verifyCode
    }

    var verifyURL = config.api.base + config.api.verify

    request.post(verifyURL, body)
      .then((data)=>{
        if(data && data.success){
          that.props.afterLogin(data.data)
          console.log(data)
        }
        else{
          AlertIOS.alert('获取验证码失败，请检查手机号是否正确')
        }
      })
      .catch((err)=>{
        // console.log(err)
        AlertIOS.alert('获取验证码失败，请检查网络是否良好')
      })
  },

  render: function(){
    return(
      <View style={styles.container}>
        <View style={styles.signupBox}>
          <Text style={styles.title}>快速登录</Text>
          <TextInput
            placeholder={'请输入手机号'}
            autoCapitalize={'none'}
            autoCorrect={false}
            keyboardType={'number-pad'}
            style={styles.inputField}
            onChangeText={(text) => {
              this.setState({
                phoneNumber: text
              })
            }} />

            {
              this.state.codeSent
              ? <View style={styles.verifyCodeBox}>
                  <TextInput
                    placeholder={'请输入验证码'}
                    autoCapitalize={'none'}
                    autoCorrect={false}
                    keyboardType={'number-pad'}
                    style={styles.verifyCodeField}
                    onChangeText={(text) => {
                      this.setState({
                        verifyCode: text
                      })
                    }} />
                    
                    {
                      this.state.countingDone
                      ? <Button style={styles.countBtn} onPress={this._sendVerifyCode}>获取验证码</Button>
                      : <Button style={styles.countBtn}>剩余秒数{this.state.countingNumber}</Button>
                    }                
                </View>
              : null
            }

            {
              this.state.codeSent
              ? <Button style={styles.btn} onPress={this._submit}>登录</Button>
              : <Button style={styles.btn} onPress={this._sendVerifyCode}>获取验证码 </Button>
            }
        </View>
      </View>
    )
  }
})

var styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: '#f9f9f9'
  },

  signupBox: {
    marginTop: 30,
  },

  title: {
    marginBottom: 20,
    fontSize: 20,
    textAlign: 'center'
  },

  inputField: {
    padding: 5,
    height: 40,
    fontSize: 16,
    marginTop: 10,
    color: '#666',
    backgroundColor: '#fff',
    borderRadius: 4
  },

 
  verifyCodeBox: {
    marginTop: 10,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },

  verifyCodeField: {
    padding: 5,
    height: 40,
    width: width - 140,
    fontSize: 16,
    color: '#666',
    backgroundColor: '#fff',
    borderRadius: 4
  },

  countBtn: {
    width: 110,
    height: 40,
    padding: 10,
    marginLeft: 8,
    backgroundColor: 'transparent',
    borderWidth: 1,
    borderColor: '#ee735c',
    textAlign: 'left',
    fontWeight: '600',
    fontSize: 15,
    color: '#ee735c',
    textAlign: 'center',
    borderRadius: 2
  },

  btn: {
    marginTop: 10,
    padding: 10,
    backgroundColor: 'transparent',
    borderColor: '#EE735C',
    borderWidth: 1,
    borderRadius: 4,
    color: '#EE735C',
  },

});

module.exports = Login